package com.piepesken.mediscale.ui.components.drugs

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp

import com.piepesken.mediscale.R

@Composable
fun DrugSearchBarButton(
    onClick: () -> Unit
) {
    // Search bar
    Box(
        modifier = Modifier
            .padding(top = 4.dp, bottom = 4.dp)
            .height(48.dp)
            .background(MaterialTheme.colorScheme.primaryContainer, RoundedCornerShape(15))
            .fillMaxWidth()
            .clickable(onClick = onClick),
        contentAlignment = Alignment.Center
    ) {
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Icon(
                imageVector = Icons.Filled.Search,
                contentDescription = stringResource(id = R.string.search),
                modifier = Modifier
                    .padding(end = 4.dp)
                    .size(MaterialTheme.typography.titleMedium.fontSize.value.dp),
                tint = MaterialTheme.colorScheme.primary
            )

            Text(
                text = stringResource(id = R.string.search),
                lineHeight = MaterialTheme.typography.titleMedium.lineHeight,
                fontSize = MaterialTheme.typography.titleMedium.fontSize,
                fontWeight = MaterialTheme.typography.titleMedium.fontWeight,
                fontStyle = MaterialTheme.typography.titleMedium.fontStyle,
                color = MaterialTheme.colorScheme.primary
            )
        }
    }
}